<template>
    <div id="modifyMailbox">
        <div class="title">邮箱修改</div>
        <div class="content" v-if="mailboxShow">
            <div id="information">
                <div class="left">原邮箱号：</div>
                <div class="right">{{oldMailbox == ""?"还未绑定邮箱":oldMailbox}}</div>
            </div>
            <div id="information">
                <div class="left">新邮箱号：</div>
                <el-input v-model="mailboxInput" placeholder="请输入新邮箱号" class="input"></el-input>
            </div>
            <div id="information" class="verifyCode">
                <div class="left">验证码：</div>
                <el-input v-model="codeInput" placeholder="请输入邮箱验证码"></el-input>
                <div class="rightButton" v-if="phoneTimeShow" @click="sendCode">发送验证码</div>
                <div class="anewRightButton" v-if="!phoneTimeShow" @click="sendCode">重新发送（{{phoneTime}}）</div>
            </div>
            <div class="button" @click="confirm">确认</div>
        </div>
        <div class="successPrompt" v-if="successPrompt">
            <img src="../../image/chenggong.png" alt="">
            <div class="hint">邮箱修改成功</div>
            <div class="button" @click="confirmSuccess">确认</div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            mailboxShow: true, // 邮箱信息的显示隐藏
            oldMailbox: "", // 原邮箱
            mailboxInput: "", // 新邮箱输入值
            codeInput: "", // 验证码输入值
            phoneTime: 60,
            phoneTimeShow: true, // 控制验证码的显示隐藏
            successPrompt: false, // 验证修改成功的显示隐藏
        };
	},
    mounted(){},
	methods: {
        // 邮箱点击发送验证码
        sendCode(){
			// console.log("邮箱发送验证码")
            this.phoneTimeShow = false
            this.timer = setInterval(()=>{
                this.phoneTime--
                if(this.phoneTime === 0){
                    this.phoneTimeShow = true
                    clearInterval(this.timer)
                }
            },1000)
		},
		// 点击显示修改成功页面
		confirm(){
            // console.log("显示修改成功页面")
			this.mailboxShow = false
			this.successPrompt = true
		},
        // 点击显示邮箱信息页面
		confirmSuccess(){
            // console.log("显示邮箱信息页面")
			this.mailboxShow = true
			this.successPrompt = false
		},
    },
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){
    #modifyMailbox{
        padding: 3% 5%;
        font-size: 16px;
        .title{
            width: 100%;
            padding-bottom: 2%;
            font-size: 24px;
            border-bottom: 1px solid #ddd;
        }
        .content{
            margin-top: 7%;
            #information{
                width: 60%;
                margin-top: 3%;
                margin-left: 20%;
                display: flex;
                align-content: center;
                align-items: center;
                .left{
                    width: 30%;
                    text-align: right;
                }
                .right{
                    width: 69%;
                    color: #ccc;
                    line-height: 4px;
                }
                .input{
                    width: 69% !important;
                    line-height: 4px;
                }
            }
            // 验证码
            .verifyCode{
                width: 60%;
                margin-top: 3%;
                margin-left: 20%;
                display: flex;
                align-content: center;
                align-items: center;
                .left{
                    width: 20%;
                    text-align: right;
                }
                .el-input{
                    width: 35%;
                    margin-right: 2%;
                }
                .rightButton{
                    width: 33%;
                    line-height: 40px;
                    font-size: 18px;
                    text-align: center;
                    color: white;
                    background: #F39E2A;
                }
                .anewRightButton{
                    width: 33%;
                    line-height: 40px;
                    font-size: 18px;
                    text-align: center;
                    color: white;
                    background: url("../../image/weixuanzhong.png") no-repeat 100%;
                }
            }
        }
        // 确认
        .button{
            width: 20%;
            margin: 10% 0% 0% 40%;
            text-align: center;
            border-radius: 5px;
            padding: 1% 0%;
            color: white;
            background: #F39E2A;
        }
        // 成功提示
        .successPrompt{
            width: 100%;
            text-align: center;
            img{
                width: 10%;
                margin-top: 15%;
            }
            .hint{
                margin: 2% 0% 10% 0%;
            }
        }
    }
}



@media screen and (max-width: 1400px){
    #modifyMailbox{
        padding: 2% 4%;
        font-size: 14px;
        .title{
            width: 100%;
            padding-bottom: 2%;
            font-size: 22px;
            border-bottom: 1px solid #ddd;
        }
        .content{
            margin-top: 6%;
            #information{
                width: 60%;
                margin-top: 2%;
                margin-left: 20%;
                display: flex;
                align-content: center;
                align-items: center;
                .left{
                    width: 30%;
                    text-align: right;
                }
                .right{
                    width: 69%;
                    color: #ccc;
                    line-height: 4px;
                }
                .input{
                    width: 69% !important;
                    line-height: 4px;
                }
            }
            // 验证码
            .verifyCode{
                width: 60%;
                margin-top: 2%;
                margin-left: 20%;
                display: flex;
                align-content: center;
                align-items: center;
                .left{
                    width: 20%;
                    text-align: right;
                }
                .el-input{
                    width: 35%;
                    margin-right: 2%;
                }
                .rightButton{
                    width: 33%;
                    line-height: 40px;
                    font-size: 16px;
                    text-align: center;
                    color: white;
                    background: #F39E2A;
                }
                .anewRightButton{
                    width: 33%;
                    line-height: 40px;
                    font-size: 16px;
                    text-align: center;
                    color: white;
                    background: url("../../image/weixuanzhong.png") no-repeat 100%;
                }
            }
        }
        // 确认
        .button{
            width: 20%;
            margin: 8% 0% 0% 40%;
            text-align: center;
            border-radius: 5px;
            padding: 1% 0%;
            color: white;
            background: #F39E2A;
        }
        // 成功提示
        .successPrompt{
            width: 100%;
            text-align: center;
            img{
                width: 8%;
                margin-top: 12%;    
            }
            .hint{
                margin: 2% 0% 8% 0%;
            }
        }
    }
}
</style>